﻿<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Circles</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        // Create an object containing LatLng, population.
        var citymap = {};
       citymap['obra-aguasclaras'] = {
           center: new google.maps.LatLng(-15.837227,-48.025942),
           population: 15
       };
       citymap['obra-aguaslindas'] = {
           center: new google.maps.LatLng(-15.746097,-48.299945),
           population: 2
       };
       citymap['obra-brasilia'] = {
           center: new google.maps.LatLng(-15.798889,-47.866667),
           population: 37
       };
       citymap['obra-brazlandia'] = {
           center: new google.maps.LatLng(-15.598359,-48.130284),
           population: 3
       };
       citymap['obra-buritis'] = {
           center: new google.maps.LatLng(-15.622582,-46.427264),
           population: 1
       };
       citymap['obra-candangolandia'] = {
           center: new google.maps.LatLng(-15.849550,-47.949072),
           population: 14
       };
       citymap['obra-ceilandia'] = {
           center: new google.maps.LatLng(-15.819167,-48.108056),
           population: 40
       };
       citymap['obra-ceres'] = {
           center: new google.maps.LatLng(-15.306370,-49.600646),
           population: 1
       };
       citymap['obra-cidadeocidental'] = {
           center: new google.maps.LatLng(-16.098066,-47.936997),
           population: 4
       };
       citymap['obra-cruzeiro'] = {
           center: new google.maps.LatLng(-15.795008,-47.926778),
           population: 9
       };
       citymap['obra-fercal'] = {
           center: new google.maps.LatLng(-15.585000,-47.870833),
           population: 0
       };
       citymap['obra-gama'] = {
           center: new google.maps.LatLng(-16.021667,-48.0675),
           population: 8
       };
       citymap['obra-guara'] = {
           center: new google.maps.LatLng(-15.810211,-47.971342),
           population: 22
       };
       citymap['obra-itapoa'] = {
           center: new google.maps.LatLng(-15.737778,-47.735556),
           population: 1
       };
       citymap['obra-jardimbotanico'] = {
           center: new google.maps.LatLng(-15.875594,-47.815518),
           population: 3
       };
       citymap['obra-lagonorte'] = {
           center: new google.maps.LatLng(-15.721079,-47.833148),
           population: 2
       };
       citymap['obra-lagosul'] = {
           center: new google.maps.LatLng(-15.906220,-47.863241),
           population: 2
       };
       citymap['obra-nucleobandeirante'] = {
           center: new google.maps.LatLng(-15.896051,-47.982454),
           population: 0
       };
       citymap['obra-paranoa'] = {
           center: new google.maps.LatLng(-15.894149,-47.612258),
           population: 5
       };
       citymap['obra-parkway'] = {
           center: new google.maps.LatLng(-15.903743,-47.933617),
           population: 1
       };
       citymap['obra-planaltina'] = {
           center: new google.maps.LatLng(-15.616667,-47.666667),
           population: 11
       };
       citymap['obra-recantodasemas'] = {
           center: new google.maps.LatLng(-15.914846,-48.100282),
           population: 6
       };
       citymap['obra-riachofundo1'] = {
           center: new google.maps.LatLng(-15.879267,-48.021164),
           population: 5
       };
       citymap['obra-riachofundo2'] = {
           center: new google.maps.LatLng(-15.887333,-48.055765),
           population: 3
       };
       citymap['obra-samambaia'] = {
           center: new google.maps.LatLng(-15.870145,-48.090676),
           population: 27
       };
       citymap['obra-santamaria'] = {
           center: new google.maps.LatLng(-16.002901,-47.988052),
           population: 44
       };
       citymap['obra-santoantoniododescoberto'] = {
           center: new google.maps.LatLng(-15.941770,-48.258582),
           population: 1
       };
       citymap['obra-saosebastiao'] = {
           center: new google.maps.LatLng(-15.902442,-47.776777),
           population: 18
       };
       citymap['obra-scia'] = {
           center: new google.maps.LatLng(-15.785491,-47.994869),
           population: 0
       };
       citymap['obra-sia'] = {
           center: new google.maps.LatLng(-15.801517,-47.960054),
           population: 0
       };
       citymap['obra-sobradinho'] = {
           center: new google.maps.LatLng(-15.653889,-47.792778),
           population: 34
       }
       citymap['obra-sudoesteoctogonal'] = {
           center: new google.maps.LatLng(-15.794870,-47.926859),
           population: 5
       };
       citymap['obra-taguatinga'] = {
           center: new google.maps.LatLng(-15.833333,-48.056389),
           population: 48
       };
       citymap['obra-valparaiso'] = {
           center: new google.maps.LatLng(-16.065459,-47.976754),
           population: 3
       };
       citymap['obra-varjao'] = {
           center: new google.maps.LatLng(-16.065459,-47.976754),
           population: 3
       };
       citymap['obra-vicentepires'] = {
           center: new google.maps.LatLng(-15.810227,-48.024501),
           population: 11
       }

        var cityCircle;

        function initialize() {
            var mapOptions = {
                zoom: 11,
                center: new google.maps.LatLng(-15.849550,-47.949072),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            for (var city in citymap) {
                // Construct the circle for each value in citymap. We scale population by 20.
                var populationOptions = {
                    strokeColor: '#FF0000',
                    strokeColorStyle: 'gradient',
                    strokeOpacity: 0.8,
                    strokeWeight: 1,
                    fillOpacity: 0.35,
                    map: map,
                    center: citymap[city].center,
                    radius: citymap[city].population * 50
                };
                cityCircle = new google.maps.Circle(populationOptions);
            }
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>